import React, { Component } from 'react';
import { List,Scroller,Touchable } from '$yo-component';
import Header from '$component/header/index.js';
import Footer from '$component/footer/index.js';
import yoHistory from '$common/history';
require('isomorphic-fetch');
import './index.scss';

class Detail extends Component {
    constructor(){
        super();
        this.state = {
            dataSource: [{text:'',key: ++guid }]
        }
    }

    getData(){
        fetch('http://localhost:3000/skills')
        .then((res) => {
            return res.json();
        }).then((skills) => {
            this.setState({
                dataSource:skills
            })
        });
    }
    componentWillMount(){
        this.getData()
    }

    render() {
        return (
            <div className="yo-flex">
                <Header title="技能页" left={false} />
                <List
                    ref="list"
                    extraClass="flex m-list"
                    dataSource={this.state.dataSource}
                    renderItem={(item, i) => [<a className="item skill" key={i}>
                        <img src={item.img}/>
                        <div className="flex">
                            <h3 className="title">{item.title}</h3>
                            <p className="introduce">{item.introduce}</p>
                        </div></a>]}
                    infinite={true}
                    infiniteSize={20}
                />

                <Footer/>
            </div>
        )
    }
}

let guid = -1;

export default Detail;
